// 开发人员模块
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import ProfileHeader from './ProfileHeader'
import ProfileAbout from './ProfileAbout'
import ProfileCreds from './ProfileCreds'
import ProfileGithub from './ProfileGithub'
import { getProfileByHandle } from '../../actions/profileActions'
// 加载动画
import Spinner from '../../common/Spinner'
export class Profile extends Component {
  componentDidMount () {
    // 获取路由传过来的动态参数
    if (this.props.match.params.handle) {
      // 带参传入发送请求
      this.props.getProfileByHandle(this.props.match.params.handle)
    }
  }
  render () {
    const { profile, loading } = this.props.profile;
    let profileContent;
    if (profile === null || loading) {
      profileContent = <Spinner />
    } else {
      profileContent = (
        <div>
          <div className="row">
            <div className="col-md-6">
              <Link to="/profiles" className="btn btn-light mb-3 float-left">
                返回个人信息
              </Link>
            </div>
            <div className="col-md-6" />
          </div>
          <ProfileHeader profile={profile} />
          {/* 技能 */}
          <ProfileAbout profile={profile} />
          {/* 教育&学历 */}
          <ProfileCreds education={profile.education} experience={profile.experience} />
          {
            profile.githubusername
              ? (<ProfileGithub username={profile.githubusername} />)
              : null
          }

        </div>
      )
    }
    return (
      <div>
        <div className="profile">
          <div className="container">
            <div className="row">
              <div className="col-md-12">{profileContent}</div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  profile: state.profile
})

const mapDispatchToProps = dispatch => {
  return {
    getProfileByHandle: (handle) => {
      dispatch(getProfileByHandle(handle))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Profile)
